<template>
    <!-- 绑定样式属性值 -->
    <div v-bind:style="{ 'background-color':pink,width:width,height:height + 'px' }"></div>
    <!-- 三元表达式 -->
    <div v-bind:style="{ 'background-color':isBule?bule: 'black',width:'50px',height:'20px' }"></div>
    <!-- 绑定样式对象 -->
    <div v-bind:style="myDiv"></div>
</template>

<script setup>
import { ref,reactive } from 'vue';

const isBule=ref(false)
const blue=ref('blue')
const pink=ref('pink')
const width=ref('100%')
const height=ref(40)
const myDiv=reactive({
    backgroundColor:'red',
    width:'50px',
    height:'20px'
})
</script>

<style scoped></style>
